<template>
  <div class="inner-container">
    <div class="section-title">基本信息</div>
    <!-- --------------------------------------------------修改表单-------------------------------------------------------- -->
    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="客户状态">{{customerStatusFormatter(formData.status)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="客户类型">{{customerTypeFormatter(formData.type)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="订单编号">{{formData.orderNumber}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="客户名称" >{{formData.name}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="客户性别">{{genderStatusFormatter(formData.gender)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item  label="年龄">{{formData.age}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="联系电话">{{formData.contactPhone}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="身份证号">{{formData.idNumber}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <el-row >
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="楼盘名称">{{formData.propertyName}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="户型">{{customerHouseTypeFormatter(formData.houseType)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-descriptions >
          <el-descriptions-item label="面积">{{formData.houseSize}} m²</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
      <el-row >
        <el-col :span="8">
          <el-descriptions>
            <el-descriptions-item label="楼盘名称">{{customerProvinceFormatter(formData.province)}} {{customerCityFormatter(formData.city)}}
              {{customerDistrictFormatter(formData.district)}} {{formData.propertyAddr}} </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    <br>
    <div class="section-title">客情跟踪</div>
    <el-form ref="formRef" :model="formData"  label-width="100px">
      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="客户状态" prop="status">
            <el-select v-model="formData.status">
              <el-option  v-for="item in customerStatusArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <span style="color:red">由系统根据不同的条件进行判定</span>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6" >
          <el-form-item label="客户来源" prop="source">
            <el-select v-model="formData.source">
              <el-option  v-for="item in customerSourceArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item prop="propertyAddr" label-width="0">
            <el-input v-model="formData.customerDescribe" placeholder="详细信息"/>
          </el-form-item>
        </el-col>

        <el-col :span="6" >
          <el-form-item label="预约时间"  >
            <el-date-picker type="date" format="YYYY-MM-DD"  value-format="YYYY-MM-DD" v-model="formData.reserveTime" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">

        <el-col :span="8">
          <el-form-item label="设计部门" prop="depId" >
            <el-select v-model="formData.depId" @change="getDesigner" >
              <el-option v-for="item in deptArr" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="设计师" prop="designer">
            <el-select v-model="formData.designer" >
              <el-option v-for="item in getDesignerArr " :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item  label="跟单人"  >
            <el-input v-model="formData.merchandiser" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="14" >
          <el-form-item label="跟单结果">
            <el-radio-group v-model="formData.followResult">
              <el-radio value="10">待跟单</el-radio>
              <el-radio value="20">已订单（财务待收款）</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10" >
          <el-form-item label="预约时间"  >
            <el-date-picker type="date" format="YYYY-MM-DD"  value-format="YYYY-MM-DD" v-model="formData.reserveTime" />
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item label="客情描述">
            <el-input v-model="formData.sourceRemark" placeholder="客情描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col>
          <el-form-item label="附件">
            <!-- handleRemove移除图片方法   handlePictureCardPreview 预览图片     -->
            <el-upload
                ref="file"
                v-model:file-list="fileList"
                v-model:action="customerImgUrl"
                name="file"
                :limit="4"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :auto-upload="false"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>

      <br>
      <div class="section-title">量房信息</div>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="是否可量房">
            <el-select v-model="formData.isQuantityHouse">
              <el-option value="10" label="可量房"></el-option>
              <el-option value="20" label="不可量房"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="量房结果">
            <el-radio-group v-model="formData.quantityHouseStatus">
              <el-radio value="10">已量房</el-radio>
              <el-radio value="20">待量房</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="预约量房">
            <el-date-picker format="YYYY-MM-DD " v-model="formData.appointmentTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际量房">
            <el-date-picker format="YYYY-MM-DD " v-model="formData.physicalTime"/>
          </el-form-item>
        </el-col>
      </el-row>



      <el-row>
        <el-col :span="12">
          <el-form-item label="量房描述">
            <el-input v-model="formData.remark"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="量房人">
            <el-input v-model="formData.quantityHouseName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <br>
      <el-form-item>
        <el-button type="primary" @click="saveCustomer">保存</el-button>
        <el-button @click="$router.push('/crm/customer')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from "vue-router";
import request from "@/utils/request";

const route = useRoute()
const router = useRouter()

// --------------------------------------------------
const formRef = ref()


//定义用于保存部门数组
const  deptArr = ref([])
const loadLeader = ()=>{
  request.get(BASE_URL+'/api/crm/personnel/dept/select?level=40').then(res=>{
    deptArr.value = res.data.list
    console.log(res.data.list)
  })
}
//定义用于保存设计师数组
const getDesignerArr =  ref([])
const  getDesigner = ()=>{
  request.get('/api/crm/user/select').then(res => {
    getDesignerArr.value = res.data
    //console.log(getDesignerArr.value)
  })
}


//定义数组用来保存车辆类型字典项
const customerStatusArr = ref([]);
const customerTypeArr = ref([]);
const customerSourceArr = ref([]);
const customerHouseTypeArr = ref([]);
onMounted(()=>{
  loadLeader()
  loadDictOptions(customerTypeArr,'customer_type');
  loadDictOptions(customerStatusArr,'customer_status');
  loadDictOptions(customerSourceArr,'customer_source');
  loadDictOptions(customerHouseTypeArr,'house_type');
})

//-------------------------客户状态----------------------------
const  customerStatusFormatter = (status)=>{
  if(!customerStatusArr.value){
    return status;
  }
  for(let item of customerStatusArr.value){
    if(item.value == status){
      status = item.label;
    }
  }
  return status;
}
//-------------------------客户类型----------------------------
const  customerTypeFormatter = (status)=>{
  if(!customerTypeArr.value){
    return status;
  }
  for(let item of customerTypeArr.value){
    if(item.value == status){
      status = item.label;
    }
  }
  return status;
}

//-------------------------户型----------------------------
const  customerHouseTypeFormatter = (status)=>{
  if(!customerHouseTypeArr.value){
    return status;
  }
  for(let item of customerHouseTypeArr.value){
    if(item.value == status){
      status = item.label;
    }
  }
  return status;
}
//对客户性别状态显示内容进行文字转换
const genderStatusFormatter = (status)=>{
  if(status ==1){
    status = '男';
  }else if(status ==0){
    status = '女';
  }
  return status;
}

let uname = localStorage.getItem('uname')
//回显对象
const formData = ref({})
const saveCustomer = () => {
  formData.value.customerId = route.query.id
    request.post('/api/crm/customer/updateFollowUp',formData.value).then(res => {
      console.log(formData.value)
      ElMessage.success('修改成功')
      //console.log(formData.value)
      router.push('/crm/customer')
    })
}

//表单回显
const imgPath = ref('')
const loadCustomer = () => {
 let id = route.query.id
  request.get( '/api/crm/customer/select?id=' + id).then(res => {
    formData.value = res.data.list[0];
    loadProvince(formData.value.province)
    loadCity(formData.value.city)
    if (formData.value.district!=null){
      loadDistrict(formData.value.district)
    }else {
      return null
    }
    getDesigner(formData.value.designer)
    //console.log(formData.value);
    //图片回显
    for( let i= 0; i<res.data.list[0].imgUrl.length;i++){
      imgPath.value = BASE_URL+res.data.list[0].imgUrl[i];
      fileList.value.push({
        name:'img'+i,
        url:imgPath.value
      })
    }
    //console.log(fileList.value)

  })
}

onMounted(() => {
  loadCustomer()
})


//加载区县
const loadDistrict = (id)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?id='+id).then(res=>{
    districtArr.value = res.data

    //console.log(districtArr.value)
  })
}
//定义区县数组
const districtArr = ref([]);
const  customerDistrictFormatter = (status)=>{
  if(!districtArr.value){
    return status;
  }
  for(let item of districtArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}

//加载城市
const loadCity = (id)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?id='+id).then(res=>{
    CityArr.value = res.data
    //console.log(CityArr.value)
    //console.log(formData.value.province)
  })
}
//定义城市数组
const CityArr = ref([]);
const  customerCityFormatter = (status)=>{
  if(!CityArr.value){
    return status;
  }
  for(let item of CityArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}

//加载省份
const loadProvince = ()=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId=0').then(res=>{
    provinceArr.value = res.data
    //console.log(provinceArr.value)
  })
}
//定义省份数组
const provinceArr = ref([]);
const  customerProvinceFormatter = (status)=>{
  if(!provinceArr.value){
    return status;
  }
  for(let item of provinceArr.value){
    if(item.id === status){
      status = item.name;
    }
  }
  return status;
}


/**图片上传相关代码开始**/
const fileList = ref([]);
//客情跟踪图片上传数组
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const customerImgUrl = ref(BASE_URL + '/api/crm/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  //console.log(uploadFile );
  let imgUrl = uploadFile.url;
  request.get("/api/crm/customer/deleteImg?imgUrl="+imgUrl).then(res => {
    ElMessage.success('附件更新')
  })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  //console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}

/**图片上传相关代码结束**/

</script>

<style scoped>
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 35px;
  line-height: 1rem;
  border-left: 3px solid #409EFF;
}

.section-title::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
}

</style>